<template>
  <CustomTable
    title="数据列表"
    rowKey="product_name"
    :pagination="{showTotal:total => `共 ${total} 条数据`, pageSize: pageSize,showLessItems: true, showSizeChanger:true}"
    :dataSource="dataSource" 
    :columns="columns" 
    :loading="loading"
    :scroll="{ x: 800 }"
  >
    <div class="content">
      <a-space>
        <a-select v-model="chartTimeSelect" @change="getData" style="width: 200px;">
          <a-select-option :value="1">当日</a-select-option>
          <a-select-option :value="2">昨日</a-select-option>
          <a-select-option :value="8">上周</a-select-option>
          <a-select-option :value="3">过去一周</a-select-option>
          <a-select-option :value="4">过去30天</a-select-option>
          <a-select-option :value="5">本月</a-select-option>
          <a-select-option :value="6">本季度</a-select-option>
          <a-select-option :value="7">自定义</a-select-option>
        </a-select>
        <a-range-picker
          v-show="chartTimeSelect == 7"
          :allowClear="false"
          :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                    '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
          :defaultValue="[start_date, end_date]"
          :disabled-date="disabledDate" 
          @change="formDateChange" 
        />
        <a-input-search class="search" v-model="searchName" placeholder="输入商品名搜索" enter-button @search="search" allowClear />
      </a-space>
    </div>
    <div slot="userName" slot-scope="{record}">
      <span>{{record.userName}}</span>
    </div>
    <div slot="cost" slot-scope="{record}">
      {{(record.cost).toFixed(2)}}
    </div>
    <div slot="profit" slot-scope="{record}">
      <span :class="record.profit>0?'fontRed':'fontGreen'">{{(record.profit).toFixed(2)}}</span>
    </div>
    <div slot="gmv" slot-scope="{record}">
      {{(record.gmv).toFixed(2)}}
    </div>
    <div slot="ctr" slot-scope="{record}">
      {{(record.ctr*100).toFixed(2) + '%'}}
    </div>
    <div slot="cvr" slot-scope="{record}">
      {{(record.cvr*100).toFixed(2) + '%'}}
    </div>
    <div slot="roi" slot-scope="{record}">
      {{(record.roi).toFixed(2)}}
    </div>
  </CustomTable>
</template>

<script>
import CustomTable from '@/components/table/CustomTable'
import moment from 'moment'
import { getProductReportByDate } from '@/api/dianshang/dianshang'

export default {
  components: { CustomTable },
  data() {
    return {
      dataSource: [],
      dataSource_total: [],
      searchName: '',
      loading: false,
      chartTimeSelect: 1,
      columns: [
        {
          title: '商品名',
          width: 240,
          dataIndex: 'product_name',
          scopedSlots: {
            customRender: 'product_name'
          },
        },
        {
          title: '消费',
          width: 200,
          dataIndex: 'cost',
          defaultSortOrder: 'descend',
          scopedSlots: {
            customRender: 'cost'
          },
          sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => a.cost - b.cost,
        },
        {
          title: '利润',
          width: 130,
          dataIndex: 'profit',
          scopedSlots: {
            customRender: 'profit'
          },
          sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => a.profit - b.profit,
        },
        {
          title: 'GMV',
          width: 200,
          dataIndex: 'gmv',
          scopedSlots: {
            customRender: 'gmv'
          },
          sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => a.gmv - b.gmv,
        },
        {
          title: '点击',
          width: 120,
          dataIndex: 'click',
          sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => a.click - b.click,
        },
        {
          title: '点击率',
          width: 120,
          dataIndex: 'ctr',
          scopedSlots: {
            customRender: 'ctr'
          },
          sorter: (a, b) => a.ctr - b.ctr,
        },
        {
          title: '转化率',
          width: 120,
          dataIndex: 'cvr',
          scopedSlots: {
            customRender: 'cvr'
          },
          sorter: (a, b) => a.cvr - b.cvr,
        },
        {
          title: '成单量',
          width: 180,
          dataIndex: 'dsOcpcConversionsDetail',
          scopedSlots: {
            customRender: 'dsOcpcConversionsDetail'
          },
          sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => a.dsOcpcConversionsDetail - b.dsOcpcConversionsDetail,
        },
        {
          title: 'ROI',
          width: 120,
          dataIndex: 'roi',
          scopedSlots: {
            customRender: 'roi'
          },
          sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => a.roi - b.roi,
        },
      ],
      moment,
      start_date: moment().add(-1, 'days'),
      end_date: moment().add(-1, 'days'),
      total: 0,
      pageSize: 10
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      let params = {
        type: this.chartTimeSelect
      }
      if (this.chartTimeSelect == 7) {
        params.start_date = this.start_date.format("YYYY-MM-DD")
        params.end_date = this.end_date.format("YYYY-MM-DD")
      }
      getProductReportByDate(params).then((res) => {
        this.loading = false
        if (res.errcode == 0) {
          this.dataSource = res.data
          this.dataSource_total = res.data
          this.total = res.data.length
        }
      }).catch(() => {
        this.loading = false
      });
      console.log(params);
    },
    disabledDate(current){
      return current && ( current < moment().endOf('day').add(-100, 'days') || current > moment().endOf('day').add('days')) ;
    },
    search(val) {
      if (val != '') {
        this.dataSource = this.dataSource_total.filter(e=>e.product_name.indexOf(val) >= 0)
      } else {
        this.dataSource = this.dataSource_total
      }
    },
    formDateChange(e) {
      if(e.length == 0){return}
      this.start_date = e[0]
      this.end_date = e[1]
      this.getData()
    },
  }
}
</script>

<style lang="less" scoped>
.content{
  margin-bottom: 20px;
}
.search{
  width: 260px;
}
.fontGreen{
  margin-left: 10px;
  color: #41b883;
}
.fontRed{
  margin-left: 10px;
  color: #c96168;
}
</style>